<template>
    <Dialog :title="title" :show="true" @close="cancel" :width="300" :height="320" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="prop-panel">
                <div class="item1">
                    <div>平移：</div>
                    <div>
                        <el-switch v-model="editingRef" size="small" />
                    </div>
                </div>
                <div class="item1">
                    <div>旋转：</div>
                    <div>
                        <el-switch v-model="rotationEditingRef" size="small" />
                    </div>
                </div>
                <div class="item1">
                    <div>x偏移：</div>
                    <el-input-number v-model="x" controls-offset="right" size="small" />
                </div>
                <div class="item1">
                    <div>y偏移：</div>
                    <el-input-number v-model="y" controls-offset="right" size="small" />
                </div>
                <div class="item1">
                    <div>z偏移：</div>
                    <el-input-number v-model="z" controls-offset="right" size="small" />
                </div>
                <div class="item1">
                    <div>偏航角：</div>
                    <el-input-number v-model="h" controls-offset="right" size="small" />
                </div>
                <div class="item1">
                    <div>俯仰角：</div>
                    <el-input-number v-model="p" controls-offset="right" size="small" />
                </div>
                <div class="item1">
                    <div>翻滚角：</div>
                    <el-input-number v-model="r" controls-offset="right" size="small" />
                </div>
            </div>
        </div>
    </Dialog>
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    toVR,
    createVueDisposer
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import WaterMendPropPanel from "./WaterMendPropPanel.vue";
import BatchPlacePropPanel from "./BatchPlacePropPanel.vue";
import { processNum } from "@/scripts/utils";

const props = withDefaults(defineProps<{ title: string, sceneObject: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel");
};
const uiLeft = document.body.clientWidth - 10 - 300;

// const uiLeft = 10;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();
const cimrtsSceneTreeWrapper = objm.cimrtsSceneTreeWrapper
const eSRtsTileset = objm.cimrtsManager.eSRtsTileset


let editingRef: any;
let rotationEditingRef: any;


const x = ref(undefined);
const y = ref(undefined);
const z = ref(undefined);
const h = ref(undefined);
const p = ref(undefined);
const r = ref(undefined);

const init = () => {
    // 高亮
    eSRtsTileset.highlightDSFeature(props.sceneObject)

    editingRef = toVR<any>(d, [props.sceneObject, "editing"])
    editingRef.value = true
    rotationEditingRef = toVR<any>(d, [props.sceneObject, "rotationEditing"])

    x.value = props.sceneObject.offset ? processNum(props.sceneObject.offset[0]) : 0
    y.value = props.sceneObject.offset ? processNum(props.sceneObject.offset[1]) : 0
    z.value = props.sceneObject.offset ? processNum(props.sceneObject.offset[2]) : 0
    h.value = processNum(props.sceneObject.rotation[0])
    p.value = processNum(props.sceneObject.rotation[1])
    r.value = processNum(props.sceneObject.rotation[2])

    props.sceneObject.dispose(props.sceneObject.offsetChanged.disposableOn(() => {
        x.value = props.sceneObject.offset ? processNum(props.sceneObject.offset[0]) : 0
        y.value = props.sceneObject.offset ? processNum(props.sceneObject.offset[1]) : 0
        z.value = props.sceneObject.offset ? processNum(props.sceneObject.offset[2]) : 0
    }))
    props.sceneObject.dispose(props.sceneObject.rotationChanged.disposableOn(() => {
        h.value = processNum(props.sceneObject.rotation[0])
        p.value = processNum(props.sceneObject.rotation[1])
        r.value = processNum(props.sceneObject.rotation[2])
    }))
}

watch(() => props.sceneObject, () => {
    init()
}, { immediate: true })

watch([x, y, z], () => {
    props.sceneObject.offset = [x.value, y.value, z.value]
})

watch([h, p, r], () => {
    props.sceneObject.rotation = [h.value, p.value, r.value]
})


onMounted(() => {

});
onBeforeUnmount(() => {
    props.sceneObject.editing = false
    props.sceneObject.rotationEditing = false

});
</script>

<style scoped>
.box {
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.prop-panel {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.item1 {
    display: grid;
    grid-template-columns: 75px 1fr;
    align-items: center;
    margin-bottom: 8px;
}

.list-img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.choose {
    background: url("@/assets/cimrts/propPanel/choose.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
}

.texture-img {
    display: flex;
    align-items: center;
}

.prop-bottom {
    display: flex;
    justify-content: flex-end;
}

.el-input-number--small {
    width: 90px;
}

.row {
    display: flex;
    gap: 10px;
}

.el-input-number--small {
    width: 120px;
}
</style>
